<template>
  <div id="main" style="width: 1250px;height:500px;"></div>
</template>

<script>
export default {
  name: "pieCharts",
  methods:{
    myEcharts(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '西安市各区县人口-2019',
          subtext: '来源：国家统计局',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['雁塔区', '长安区', '西咸新区', '未央区', '莲湖区','临潼区','碑林区','灞桥区','新城区','周至县','鄠邑区','蓝田县','高陵区','阎良区']
        },
        series: [
          {
            name: '人口/万',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 134.32, name: '雁塔区'},
              {value: 104.28, name: '长安区'},
              {value: 102.32, name: '西咸新区'},
              {value: 77.74, name: '未央区'},
              {value: 76.86, name: '莲湖区'},
              {value: 69.69, name: '临潼区'},
              {value: 67.97, name: '碑林区'},
              {value: 67.73, name: '灞桥区'},
              {value: 64.13, name: '新城区'},
              {value: 59.41, name: '周至县'},
              {value: 55.86, name: '鄠邑区'},
              {value: 53.68, name: '蓝田县'},
              {value: 36.26, name: '高陵区'},
              {value: 30.12, name: '阎良区'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.myEcharts();
  }
}
</script>

<style scoped>

</style>
